{% extends "layouts/base.html" %}
{% load static %}
{% block title %} 添加人员工时 {% endblock %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- [ Main Content ] start -->
    <section class = "pcoded-main-container">
        <div class = "pcoded-content">
            <!-- [ breadcrumb ] start -->
            <div class = "page-header">
                <div class = "page-block">
                    <div class = "row align-items-center">
                        <div class = "col-md-12">
                            <div class = "page-header-title">
                                <h5 class = "m-b-10">添加人员工时</h5>
                            </div>
                            <ul class = "breadcrumb">
                                <li class = "breadcrumb-item"><a href = "{% url 'index' %}"><i
                                        class = "feather icon-home"></i></a></li>
                                <li class = "breadcrumb-item"><a href = "#!">基础数据</a></li>
                                <li class = "breadcrumb-item"><a href = "#!">人员工时</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ breadcrumb ] end -->
            <!-- [ Main Content ] start -->
            <div class = "row">

                <!-- [ stiped-table ] start -->
                <div class = "col-xl-12">

                    <div class = "card">
                        <div class = "card-header">
                            <div style = "height: 15px;"></div>
                        </div>
                        <div class = "card-body">


                            <div class = "row">
                                <div class = "col-md-4"></div>
                                <div class = "col-md-4">
                                    <form action = "{% url 'add_employee_hour' %}" method = "post">
                                        {% csrf_token %}
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                                <label class = "input-group-text"
                                                       for = "inputGroupSelectName">姓名</label>
                                            </div>
                                            <select class = "custom-select" id = "inputGroupSelectName"
                                                    onchange = "change_process(this);" name = "e-name">
                                                {% for en in all_e_name %}
                                                    <option value = "{{ en.jobname }}">{{ en.jobname }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                                <label class = "input-group-text"
                                                       for = "inputGroupSelectProcess">工序</label>
                                            </div>
                                            <select class = "custom-select" id = "inputGroupSelectProcess"
                                                    name = "e-process">
                                                {% for ep in all_process %}
                                                    <option value = "{{ ep.name }}">{{ ep.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                                <span class = "input-group-text"
                                                      id = "inputGroup-sizing-hours">工时</span>
                                            </div>
                                            <input type = "float" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-hours" name = "work-hours">
                                        </div>
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                                <span class = "input-group-text"
                                                      id = "inputGroup-sizing-date">日期</span>
                                            </div>
                                            <input type = "date" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-date" id = "work-day"
                                                   name = "work-day">
                                        </div>
                                        <div class = "form-group mx-sm-3 mb-2 text-center">
                                            <button type = "submit" class = "btn btn-primary mb-2">确定</button>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <button type = "button" class = "btn btn-primary mb-2"
                                                    onclick = "btn_ret()">取消
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div class = "col-md-4"></div>
                            </div>

                        </div>
                    </div>


                </div>
                <!-- [ stiped-table ] end -->

            </div>
            <!-- [ Main Content ] end -->
        </div>
    </section>
    <!-- [ Main Content ] end -->

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <script src = "{% static 'laydate/laydate.js' %}"></script>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        //点击后返回员工列表页
        function btn_ret() {
            window.location.replace("{% url 'employee_hours' 1 %}")
        }


        //根据姓名更改默认的工序
        function change_process(ths) {
            var e_name = $(ths).val();
            $.ajax({
                type: 'GET',
                url:{% url 'get_employee_process' %},
                data: {e_name: e_name},
                success: function (ret) {
                    console.log(ret)
                    var va = ret
                    //生效，但会出现执行两次后就不生效
                    //$('#inputGroupSelectProcess option').filter(function(){return $(this).text()==ret;}).attr("selected",true);
                    //$("#inputGroupSelectProcess option[value=ret]").prop("selected","selected");
                    $("#inputGroupSelectProcess").val(ret) //方法一：成功
                    //var selectid = document.getElementById("inputGroupSelectProcess");    # 方法二:失败
                    //for (i=0;i<selectid.length;i++){
                    //   if (selectid[i].val == ret)
                    //       selectid[i].selected = true;
                    //}
                }
            })
        }

        //使页面加载时就自动按姓名对应的工序来修改下拉框的选中项
        $(document).ready(function () {
            //给input--date 设置默认值为当天
            var time = new Date();
            var day = ("0" + time.getDate()).slice(-2);
            var month = ("0" + (time.getMonth() + 1)).slice(-2);
            var today = time.getFullYear() + "-" + (month) + "-" + (day);
            $('#work-day').val(today);


            var name_objSelect = document.getElementById("inputGroupSelectName")
            //检测select是否有选中项
            if (name_objSelect.selectedIndex > -1) {
                var e_name = $("#inputGroupSelectName").find("option:selected").text();
                $.ajax({
                    type: 'GET',
                    url:{% url 'get_employee_process' %},
                    data: {e_name: e_name},
                    success: function (ret) {
                        console.log(ret)
                        var va = ret
                        $("#inputGroupSelectProcess").val(ret) //方法一：成功
                    }
                })

            }
        })
    </script>

{% endblock javascripts %}
